<template>
  <div id="html">
    <div class="left">
      <ul>
        <li
          class="title"
          v-for="(item1, index1) in htmllist"
          :key="index1"
          :class="{active:cla===index1}"
          :data-flag="index1"
          @click="cla=index1;changeflag(index1)"
        >
          {{ item1.title }}
          <ul class="items">
            <li
              class="item"
              v-for="(item2, index2) in item1.HTML"
              :key="index2"
            >
              {{ item2.title }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main">
      <html-main v-model="flag"> </html-main>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import htmlMain from "./html_main";

export default {
  data() {
    return {
      htmllist: [],
      flag:1,
      cla:"HTML2_1"
    };
  },
  components: {
    htmlMain,
  },
  created() {
    this.gethtmlList();
  },
  methods: {
    changeflag(val){
      val = val.slice(6,8);
      this.flag=parseInt(val);
    },
    gethtmlList() {
      axios({
        url: "/data/HtmlDocument.json",
        method: "get",
      }).then((res) => {
        this.htmllist = res.data;
      });
    },
  },
};
</script>

<style>
</style>